import React, { Component } from 'react';
import { List } from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import './index.scss';
import { Touchable } from '$yo-component';
import { Carousel } from '$yo-component';
var z = 25;
var uname = '';
class Detail extends Component {
    constructor() {
        super();
        this.state = {
            dataSource:getRandomDataSource(25),
            s_title:'',
            s_img:'',
            s_time:'',
            news_id:''
        };
    }
    refresh() {
        z = 15;
        this.setState({ dataSource: getRandomDataSource(25) });
    }

    fetch() {
        this.setState({ dataSource: this.state.dataSource.concat(getRandomDataSource(5)) });
    }

    componentWillMount() {
        var that = this;
        function ajax(num){
                $.ajax({  
                  type: 'GET',  
                  url: 'http://api.dagoogle.cn/news/get-news',
                  data:{
                    tableNum:num,
                    pagesize:40
                  },
                  async:false,
                  dataType:'jsonp', //告诉Ajax调用$jsonp  
                  success: function(news){  
                      // var yy=JSON.stringify(data);  
                      //var tlist=JSON.stringify(data.enttityList);  
                      //console.log(tlist);  
                      //console.log(this.state.title+'22');
                      var con_title = [];
                      var con_img = [];
                      var con_time = [];
                      var con_id = [];
                      for(var i=0;i<news.data.length;i++){
                        con_title.push(news.data[i].title)
                        con_img.push(news.data[i].top_image)
                        con_time.push(getLocalTime(news.data[i].edit_time))
                        con_id.push(news.data[i].news_id)
                      }
                      that.setState({ s_title:con_title,s_img:con_img,s_time:con_time,news_id:con_id,dataSource: getRandomDataSource(25)});
                      //var commentsStr=JSON.stringify(this.state.comments);  
                      //console.log("\n--->>commentsStr:\n"+commentsStr); //查看获取的数据  
                     
                  }
            });  
        }
        ajax(1);
        function cookie(){
            if($.cookie('UserName')){
                uname=$.cookie('UserName');
            }else{
                uname='';
            }
            
        }
        cookie();
        
    }
    componentDidMount(){
        if(uname!=''){
            $('.login').hide();
            $('.welcome').show();
            $('.tuichu').show();
        }
    }
    render() {
        function tuichu(){
            $('.login').show();
            $('.welcome').hide();
            $('.tuichu').hide();
            $.cookie('UserName',null,{expires:-1});
        }
        return (

            <div className="yo-flex">
                <Header title="网易新闻"/>
                <Touchable
                     touchClass="touchable-highlight"
                    onTap={()=> {
                        yoHistory.push('/login');
                    }}
                >
                    <div className="login">登录</div>
                </Touchable>
                <Touchable
                     touchClass="touchable-highlight"
                    onTap={()=> {
                        yoHistory.push('/personal');
                    }}
                >
                    <div className="welcome">{uname},欢迎你！</div>
                </Touchable>
                <Touchable
                     touchClass="touchable-highlight"
                    onTap={()=> {
                        tuichu()
                    }}
                >
                    <div className="tuichu">退出</div>
                </Touchable>
                <ul className="yo-tab">
                    <Touchable
                        touchClass="touchable-highlight"
                        onTap={()=> {
                            yoHistory.push('/list');
                        }}
                    >
                        <li style="color:grey;">头条</li>
                    </Touchable>
                    <Touchable
                        touchClass="touchable-highlight"
                        onTap={()=> {
                            yoHistory.push('/social');
                        }}
                    >
                        <li>娱乐</li>
                    </Touchable>
                    <Touchable
                        touchClass="touchable-highlight"
                        onTap={()=> {
                            yoHistory.push('/war');
                        }}
                    >
                        <li>军事</li>
                    </Touchable>
                </ul>
                <Carousel>
                    <li className="item"><img className="img" src="./img/img_1.jpg" /></li>  
                    <li className="item"><img className="img" src="./img/img_2.jpg" /></li>  
                    <li className="item"><img className="img" src="./img/img_3.jpg" /></li>  
                    <li className="item"><img className="img" src="./img/img_4.jpg" /></li>  
                    <li className="item"><img className="img" src="./img/img_5.jpg" /></li>  
                </Carousel>
                <List
                    ref="list"
                    style="height:80px"
                    extraClass="flex m-list yo-list-fullscreen"
                    dataSource={this.state.dataSource}
                    // title={this.state.title}
                    renderItem={(item, i) => <div className="yo-col"><img src={this.state.s_img[i]} class="s-img"/><p style="padding:3%;" class="t_1">{this.state.s_title[i]}</p><p class="t_2">{this.state.s_time[i]}</p></div>}
                    infinite={true}
                    infiniteSize={20}
                    itemHeight={80}
                    usePullRefresh={true}
                    onRefresh={() => {
                        setTimeout(() => {
                            this.refresh();
                            this.refs.list.stopRefreshing(true);
                            
                        }, 500);
                    }}
                    useLoadMore={true}
                    onLoad={() => {
                        // var timer = setTimeout(() => {
                        //     this.fetch();
                        //     this.refs.list.stopLoading(true);
                        // }, 500);
                        if(z>35){
                            clearTimeout(timer)
                        }else{
                            var timer = setTimeout(() => {
                                this.fetch();
                                this.refs.list.stopLoading(true);
                            }, 500);
                            z += 5;
                        }
                        console.log(z)
                    }}
                    itemExtraClass={(item, i) => {
                        return 'item ' + i;
                    }}
                    onItemTap={(item, i, ds) => {
                        yoHistory.push(`/detail/${i}/${1}/${this.state.s_title[i]}/${this.state.news_id[i]}`);
                    }}
                />

            </div>
        )
    }
}

let guid = -1;

function getArrayByLength(length) {
    var ret = [];
    for (var i = 0; i < length; i++) {
        ret[i] = null;
    }
    return ret;
}

function getRandomList(size) {
    return getArrayByLength(size).fill(1).map(num => parseInt(Math.random() * 100));
}

function getRandomDataSource(size) {
    return getRandomList(size).map(num => ({ text: num, key: ++guid }));
}

function getLocalTime(nS) {     
   return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');     
}


export default Detail;
